<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.w3.org/1999/xhtml">
<head th:replace="admin/_fragments :: head(~{::title})">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>后台登录页面</title>
    <link rel="stylesheet" href="../../static/css/bootstrap.min.css"/>
    <link rel="stylesheet" href="../../static/lib/bootstrapValidator/css/bootstrapValidator.min.css"/>

    <style>
        form{
            width: 300px;
            text-align: center;
            margin-left: 450px;
            margin-top: 220px;
        }
        .form-control, button{
            width: 300px;
            height: 40px;
        }
    </style>
</head>
<body style="background-color: #00aaaa" >
<div class="container">
    <form id="form" class="form-signing" method="post" action="#" th:action="@{/admin/login}">
        <p style="color : #9FEE00;" th:if="${message} != null">[[${message}]]</p>
        <h2 class="form-signing-heading">后台登录</h2>
        <div class="form-group">
            <label for="username" class="sr-only">用户名</label>
            <input id="username" type="text" name="username" class="form-control" placeholder="用户名" required>
        </div>
        <div class="form-group">
            <label for="password" class="sr-only">密码</label>
            <input id="password" type="password" name="password" class="form-control" placeholder="密码" required>
        </div>
        <br>
        <button class="btn btn-lg btn-primary btn-block" type="submit">登录</button>
        <p class="mt-5 mb-3 text-muted">&copy; 2019-2020</p>
    </form>
</div> <!-- /container -->

<!--/*/<th:block th:replace="admin/_fragments :: script">/*/-->
<script type="text/javascript" src="../../static/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="../../static/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../../static/lib/bootstrapValidator/js/bootstrapValidator.min.js"></script>
<!--/*/</th:block>/*/-->
<script>
    $(function () {
        /*表单验证的初始化*/
        $('form').bootstrapValidator({
            fields: {
                username: {
                    validators: {
                        notEmpty: {
                            message: '用户名不能为空'
                        }
                    }
                },
                password: {
                    validators: {
                        notEmpty: {
                            message: '密码不能为空'
                        }
                    }
                }
            }
        });
    });

    // 提交时验证
    $('form').submit(function () {
        var bootstrapValidator = $('form').data('bootstrapValidator');
        // 提交时验证
        bootstrapValidator.validate();
        if (bootstrapValidator.isValid()) {
            return true;
        } else {
            return false;
        }
    });
</script>
</body>
</html>